<template>
    <div id="app" class="message-page">
        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-middle">消息</div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        <section v-for="msg in message" class="has-msg" v-if="hasMsg">
            <div class="msg-time">
                {{ msg.date }}
            </div>
            <div class="msg-box">
                <a :href="item.url" v-for="item in msg.list" @click="getMsgId(item.id)">
                    <p class="f28">
                        <span>
                            <span class="color9">{{ item.remark ? (item.title+ '：') : item.title}}</span><span class="colorff0">{{ item.remark }}</span>
                        </span>
                        <span class="color98">
                            <span>{{ item.timeType }}</span><span>{{ item.time }}</span>
                        </span>
                    </p>
                    <p>
                        <i class="circle" v-if="!item.is_read"></i>
                        <span class="f30 color3" :class="{ color91 : item.is_read }">
                            <span v-if="item.type === 2">反馈内容：</span>
                            <span>{{ item.describe }}</span>
                        </span>
                    </p>
                </a>
            </div>
        </section>
        <section class="no-msg" v-if="message.length == 0"></section>
    </div>
</template>

<script>
import scrollFixed from "../components/scrollFixed.vue";
import pageBar from "../components/pagebar.vue";
export default {
    name: "message",
    components: {
        [scrollFixed.name]: scrollFixed,
        [pageBar.name]: pageBar
    },
    data() {
        return {
            hasMsg: true,
            message: [],
            timeType: '',
        };
    },
    mounted () {
        this.getMessage();
    },

    created () {


    },

    methods: {
        getMessage () {
            let data = '';
            this.$http.get('?ct=member_center&ac=message_list').then( res => {
                data = res.data;
                if (data.code === 0) {
                    this.hasMsg = true;
                    this.message = data.data.list;
                    this.message.forEach(msg => {
                        let list = msg.list;
                        list.forEach(item => {
                            if (item.type === 1) {
                                item.url = this.$config.pages.system_message;
                            } else if (item.type == 2) {
                                item.url = this.$config.pages.feedbackDetails;
                                item.timeType = '投诉时间：';
                            } else if(item.type == 3) {
                                item.url = this.$config.pages.complainDetails;
                                item.timeType = '反馈时间：';
                            }  else if(item.type == 4) {
                                item.url = this.$config.pages.comment+'?type=reply&id='+item.foreign_id;
                            } else if(item.type == 5) {
                                item.url = this.$config.pages.admire+'?id='+item.foreign_id;
                            } 
                            item.time = this.$moment(item.create_time * 1000).format("hh:mm:ss")
                        })
                    })
                } else {
                    this.hasMsg = false;
                    this.$toast(data.msg);
                }
            });
        },

        getMsgId (id) {
            localStorage.setItem('msgId', id);
        }
    }
};
</script>

<style lang="less">
.message-page {
    .color9 {
        color: #999;
    }
    .colorf6 {
        color: #f6f6f6;
    }
    .color98 {
        color: #989898;
    }
    .colorff0 {
        color: #ff0000;
    }
    .color3 {
        color: #333;
    }
    .color91 {
        color: #919191;
    }

    .f24 {
        font-size: 24px;
    }
    .f28 {
        font-size: 28px;
    }
    .f30 {
        font-size: 30px;
    }


    display: flex;
    flex-direction: column;
    background-color: #fff;

    .header-middle {
        font-size: 36px;
        color: #333;
    }

    .has-msg {
        .msg-time {
            font-size: 24px;
            color: #999;
            background-color: #f6f6f6;
            text-align: center;
            padding: 20px 0;
        }
        .msg-box {
            background-color: #f6f6f6;
            a {
                display: block;
                padding: 30px;
                margin-bottom: 20px;
                background: #fff;
                p:first-child {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 15px;
                }
                p:last-child {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .circle {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        margin-right: 10px;
                        background-color: #ff0000;
                        border-radius: 50%;
                    }
                    & > span {
                        display: inline-block;
                        width: 98%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }

            }
        }



    }
    
    .no-msg {
        border-top: 0.013333rem solid #eee;
        position: absolute;
        top: 1.093333rem;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff url('../assets/icon-no-message.png') no-repeat;
        background-size: 100% 25%;
        background-position-y: 25%;
    }
}
</style>


